{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input id="c-name" lay-verify="required" class=" layui-input" name="row[name]" type="text" value="{$data.name}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类ID</label>
        <div class="layui-input-block">
            <input id="c-account_cate_id" lay-verify="" data-source="admin/special_cate/index" class="selectpage layui-input" name="row[account_cate_id]" type="text" value="{$data.account_cate_id}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">默认价格</label>
        <div class="layui-input-block">
            <input id="c-price" lay-verify="required" class=" layui-input" step="0.01" name="row[default_price]" type="number" value="{$data.default_price}">
        </div>
    </div>


    <!-- 动态表单区域 -->
    <div class="layui-form-item">
        <label class="layui-form-label">特殊省份价格</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="add-price">添加价格</button>
            <table class="layui-table" id="price-table">
                <thead>
                <tr>
                    <th>省份</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">单位</label>
        <div class="layui-input-inline">
            <input id="c-unit" lay-verify="required" class=" layui-input" name="row[unit]" type="text" value="{$data.unit}">
        </div>
        <div class="layui-form-mid no-float layui-word-aux">计量单位，如:年、次、月</div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input id="c-sort" lay-verify="required" class=" layui-input" name="row[sort]" type="number" value="{$data.sort}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="row[status]" value="1" title="显示" {if $data.status==1}checked{/if}>
            <input type="radio" name="row[status]" value="0" title="隐藏" {if $data.status==0}checked{/if}>
        </div>
    </div>
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<script type="text/javascript">
layui.use('yznForm', function() {
    var yznForm = layui.yznForm;
    yznForm.bindevent($("form.layui-form"));
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        // 添加价格按钮点击事件
        $("#add-price").click(function(){
            // 请求省份数据
            $.ajax({
                url: '/admin/area/getList',
                method: 'GET',
                success: function(provinceData) {
                    // 创建一个映射，将省份名称映射到对应的 option 元素
                    var provinceOptionsMap = {};
                    provinceData.forEach(function(province) {
                        provinceOptionsMap[province.shortname] = '<option value="' + province.shortname + '">' + province.shortname + '</option>';
                    });

                    // 创建新行
                    var newRow = '<tr>' +
                        '<td><select class="province-dropdown" multiple name="province[]"></select></td>' +
                        '<td><input type="text" class="layui-input price-input" name="price[]"></td>' +
                        '<td><button type="button" class="layui-btn layui-btn-danger delete-row">删除</button></td>' +
                        '</tr>';

                    // 添加新行
                    $("#price-table tbody").append(newRow);

                    // 获取新添加的行中的下拉框元素
                    var dropdown = $('.province-dropdown:last');

                    // 添加省份选项
                    Object.values(provinceOptionsMap).forEach(function(option) {
                        dropdown.append(option);
                    });

                    // 使用layui的form.render方法重新渲染下拉框
                    layui.use('form', function() {
                        var form = layui.form;
                        form.render('select');
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Failed to fetch province data:', error);
                }
            });
        });

        // 先请求省份数据以供后续使用
        $.ajax({
            url: '/admin/area/getList',
            method: 'GET',
            success: function(provinceData) {
                // 创建一个映射，将省份名称映射到对应的 option 元素
                var provinceOptionsMap = {};
                provinceData.forEach(function(province) {
                    provinceOptionsMap[province.shortname] = '<option value="' + province.shortname + '">' + province.shortname + '</option>';
                });

                // 遍历之前添加的省份和价格数据
                <?php foreach ($area as $item): ?>
                var newRow = '<tr>' +
                    '<td><select class="province-dropdown" multiple name="province[]"></select></td>' +
                    '<td><input type="text" class="layui-input price-input" name="price[]" value="<?php echo $item['price']; ?>"></td>' +
                '<td><button type="button" class="layui-btn layui-btn-danger delete-row">删除</button></td>' +
                '</tr>';
                // 添加新行
                $("#price-table tbody").append(newRow);

                // 获取新行中的下拉框元素
                var dropdown = $('.province-dropdown:last');

                // 添加省份选项
                Object.values(provinceOptionsMap).forEach(function(option) {
                    dropdown.append(option);
                });

                // 设置下拉框中已选中的值
                dropdown.val('<?php echo $item['area_name']; ?>');

                // 使用layui的form.render方法重新渲染下拉框
                layui.use('form', function() {
                    var form = layui.form;
                    form.render('select');
                });
                <?php endforeach; ?>

                // 删除按钮点击事件
                $(document).on('click', '.delete-row', function() {
                    $(this).closest('tr').remove();
                });
            },
            error: function(xhr, status, error) {
                console.error('Failed to fetch province data:', error);
            }
        });
    });
</script>{/block}